<template>
  <div class="container">
    <div class="container-main">
      <scroller :on-refresh="refresh" :on-infinite="infinite" ref="main_scroll"> 
        <div class="life-banner loading-bg">
          <swiper :options="swiperBanner" id="swiper-banner" ref="mySwiperBanner">
            <swiper-slide class="flex-box">
              <p><img class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.35s" swiper-animate-delay="0.1s" src="../assets/img/play-icon.png" alt="">
                <span class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.35s" swiper-animate-delay="0.2s">天方烨谈1</span>
              </p>
              <h3 class="ani" swiper-animate-effect="fadeInLeft" swiper-animate-duration="0.35s" swiper-animate-delay="0.35s">说你听得懂的生命<br/>科学</h3>
              <img src="../assets/img/banner-index-a01.png" alt="">
            </swiper-slide>
          </swiper>
        </div>
        <div class="yetan-lists">
          <ul>
            <li v-for="(item, index) in lists" :key="index">
              <div class="yetan-play">
                <svg class="icon" aria-hidden="true">
                  <use xlink:href="#icon-life-play-icon"></use>
                </svg>
              </div>
              <div class="yetan-main">
                <h3>{{item.title}}</h3>
                <p>{{item.stage}}</p>
              </div>
              <div class="yetan-img loading-bg flex-box">
                <img :src="require('../assets/img/' + item.img)" alt="">
              </div>
            </li>
          </ul>
        </div>
      </scroller>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import * as swiperAni from '@/quanjiyin/assets/js/common/swiper.animate.min'
import Header from '../components/Header.vue'
import Vue from 'vue'
import VueScroller from 'vue-scroller'
Vue.use(VueScroller)
export default {
  name: 'home',
  data() {
    return {
      navIndex: 0,
      transtionSlide: 'slide-left',
      lists: [
        {
          title: '[非要你健康] 二价、四价、九价，宫颈癌疫苗怎么选',
          stage: '第639期',
          img: 'test-a02.png'
        },
        {
          title: '鲤鱼要灭绝了？',
          stage: '第639期',
          img: 'test-a01.png'
        },
        {
          title: '[非要你健康] 二价、四价、九价，宫颈癌疫苗怎么选',
          stage: '第639期',
          img: 'test-a02.png'
        },
        {
          title: '[非要你健康] 二价、四价、九价，宫颈癌疫苗怎么选',
          stage: '第639期',
          img: 'test-a01.png'
        }
      ],
      swiperBanner: {
        // resistanceRatio: 0, // 禁止边缘抵抗
        effect: 'fade',
        speed: 1500,
        on: {
          init: function() {
            swiperAni.swiperAnimateCache(this)
            swiperAni.swiperAnimate(this)
          },
          slideChange: function() {
            swiperAni.swiperAnimate(this)
          }
        }
      }
    }
  },
  components: {
    Header
  },
  computed: {
    mySwiperBanner() {
      return this.$refs.main_scroll.swiper
    }
  },
  methods: {
    refresh() {
      console.log('refresh')
      this.timeout = setTimeout(() => {
        this.$refs.main_scroll.finishPullToRefresh()
      }, 1500)
    },
    infinite() {
      this.timeout = setTimeout(() => {
        this.$refs.main_scroll.finishInfinite(true)
      }, 1000)
    }
  },
  created() {},
  mounted() {}
}
</script>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100vh;
  padding-top: 64px;
  padding-left: 15px;
  padding-right: 15px;
  box-sizing: border-box;
}
.container-main {
  width: 100%;
  height: calc(100% - 50px);
  position: relative;
}
.life-banner {
  width: 100%;
  padding-bottom: 40%;
  position: relative;
  background: #f3f3f3 url(../assets/img/un-load.png) center no-repeat;
  background-size: r(50);
  border-radius: r(8);
  padding-left: r(10);
  padding-right: r(10);
  box-sizing: border-box;
  overflow: hidden;
  margin-top: r(14);
  box-shadow: 0 8px 12px rgba($color: #000000, $alpha: 0.05);
  .swiper-container {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  img {
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
  }
  p,
  h3 {
    position: absolute;
    top: 14.3%;
    left: 5.3%;
    z-index: 66;
    color: #fff;
    font-size: r(14);
  }
  p {
    img {
      width: r(15);
      height: r(15);
      position: relative;
      margin-right: r(6);
    }
  }
  h3 {
    top: 33%;
    left: 5.3%;
    font-family: 'FZZZHONGJW';
    font-size: r(22);
    line-height: r(32);
  }
}
.yetan-lists,
.tingshuo-lists {
  margin-top: r(20);
  ul {
    width: 100%;
    overflow: hidden;
    li {
      width: 100%;
      float: left;
      padding-top: r(14);
      .yetan-play {
        width: r(20);
        height: r(20);
        float: left;
        font-size: r(22);
        margin-right: r(12);
        margin-top: r(10);
        border-radius: 100%;
        box-shadow: 4px 4px 16px rgba($color: #000000, $alpha: 0.1);
      }
      .yetan-main {
        width: r(200);
        float: left;
        border-bottom: 1px solid #dedede;
        h3 {
          font-size: r(16);
          line-height: r(28);
          height: r(56);
        }
        p {
          font-size: r(12);
          line-height: r(20);
          margin-top: r(18);
          margin-bottom: r(16);
        }
      }
      .yetan-img {
        width: r(88);
        height: r(88);
        float: right;
        overflow: hidden;
        margin-top: r(10);
        border-radius: r(5);
        img {
          width: 100%;
        }
      }
      &:last-child {
        .yetan-main {
          border-bottom: none;
        }
      }
    }
  }
}
.slide-active {
  transition: 0.3s cubic-bezier(0.55, 0, 0.1, 1);
  transition-property: opacity, transform;
}
.slide-left-enter,
.slide-right-leave-to {
  opacity: 0;
  transform: translate3d(30%, 0, 0);
}
.slide-left-leave-to,
.slide-right-enter {
  opacity: 0;
  transform: translate3d(-30%, 0, 0);
}
</style>
